<script lang="jsx">
import utils from '@/utils'
export default {
    name: 'form-component',
    props: {
        formSetting: {
            type: Object,
            required: false,
            default: () => {}
        },
        model: {
            type: Object,
            required: false,
            default: () => {}
        },
        defaultmodel: {
            type: Object,
            required: false,
            default: () => {}
        },
        setting: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {}
    },

    watch: {
        rulesFromSetting: 'clearValidate'
    },
    computed: {
        form(){
            return {
                initialized: false,
                model: {...this.model,...this.defaultmodel},
                labelWidth: '100px',
                row: {
                    getter: 10
                },
                ...this.formSetting
            }
        },
        // 表单设置
        // 根据表单设置计算出校验规规则
        rulesFromSetting () { return this._.fromPairs(this.setting.filter(item => item.rule).map(item => [item.prop, item.rule])) },
        // 根据表单设置计算出表单默认值
        formFromSetting () { return this._.fromPairs(this.setting.map(item => [item.prop, item.default])) },
        // // 表单是否发生变化
        isFormChanged () { return !utils.helper.isIdenticalObject(this.formFromSettingAndDetail, this.form.model) }
    },
    render() {
        /**
         * @description 表单组件
         * @param {Object} item 本表单项目的设置数据
         */
        const formItem = item => {

            const node = [
                item.title ? <el-col span={24} class="form-title">
                    {item.title}
                </el-col> : null,
                <el-col {...{ attrs: item.col }}>
                    <el-form-item label={item.label} prop={item.prop} label-width={item.labelWidth }>
                        {item.render}
                    </el-form-item>
                </el-col>
            ]

            return node
        }
        const node = [
            <el-form
                {...{ attrs: this.form }}
                ref="form"
                class="form-component"
                rules={this.rulesFromSetting }
                disabled={this.isFormDisabled}>
                <el-row {...{ attrs: this.form.row }}>
                    {this.setting
                        .filter(item => item.show !== false)
                        .map(formItem)}
                </el-row>
                {this.$slots.footer || null}
            </el-form>
        ]
        return node
    },
    methods: {
        /**
         * @description 在提交表单之前可选进行数据处理
         * @param {Object} data 默认的表单数据
         */
        transformSubmitData(data) {
            return data
        },
        /**
         * @description 提交表单
         */
        submit() {
//             validate(...args) {
//   return this.$refs.reasonForm.validate(...args)
// }
            return this.$refs.form
        },
        /**
         * @description 清空表单校验
         */
        clearValidate () {
            this.$nextTick(() => {

                this.$refs.form && this.$refs.form.clearValidate()
            })
        }
    }
}
</script>
<style lang="scss" scoped>
// ::v-deep.el-form-item--medium .el-form-item__label {
//     width: 100px;
// }
.form-component {
    ::v-deep .el-input--medium .el-input__inner {
        // border-radius: 10px;
        // background: #f1f7ff;
    }
    ::v-deep .el-select {
        width: 100%;
    }
    ::v-deep.el-date-editor {
        width: 100%;
    }
    ::v-deep.el-input-number {
        width: 100%;
    }
    ::v-deep.el-cascader {
        width: 100%;
    }
    .el-form-item .el-form-item {
        margin-bottom: 22px;
    }
    .form-title {
        background-color: #f2f8ff;
        height: 52px;
        text-align: center;
        line-height: 52px;
        font-size: 16px;
        color: #333333;
        margin-bottom: 30px;
    }
}
</style>
